<template>
	<view class="setting-nickname-wrapper ">
		<view class="conteainer-public-style mg24 flex-c-s">
			<input type="number" style="height: 40rpx; flex: 1; margin-right: 24rpx;" v-model="phone" placeholder="请输入手机号" /> 
			<uni-icons type="closeempty" size="16" color="#999"></uni-icons>
		</view>
		
		<view class="conteainer-public-style mg24 flex-c-s">
			<view class="flex-c">
				<input type="number" style="height: 40rpx; flex: 1; margin-right: 24rpx;" v-model="code" placeholder="请输入验证码" />
				<uni-icons type="closeempty" size="16" color="#999"></uni-icons>
			</view>
			<text class="fz26 color-theme" @click="getTestCode">{{ codeTxt }}</text>
		</view>
		
		<button class="public-large-btn b-r16">保 存</button>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'

export default defineComponent({
	setup() {
		const phone = ref('')
		const timer = ref()
		const state = reactive({
			second: 60,
			codeTxt: '获取验证码',
			phone: '',
			code: ''
		})
		
		const getTestCode = async () => { // 15502992957
			if(state.codeTxt !== '获取验证码') return;
			try{
				let res; //= await getLoginCode(state.phone); 
				console.log(res);
				if(res.code === 0 ) {
					uni.showToast({
						icon: 'success',
						title: '验证码已发送'
					})
					timer.value = setInterval(() => {
						if(state.second <= 0) {
							clearInterval(timer.value)
							state.second = 60
							state.codeTxt = '获取验证码'
							return
						}
						state.second --
						state.codeTxt = `${state.second}后重新发送` 
					}, 1000) 
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}  
			}catch(e){ 
				uni.showToast({
					icon: 'fail',
					title: '网络错误'
				})
			} 
		}
		
		return {
			getTestCode,
			phone,
			...toRefs(state)
		}
	}
})
</script>

<style>
	page{ background-color: #f8f8fa;}
</style>

<style lang="scss" scoped>
.setting-nickname-wrapper{
	.b-r16{
		margin-top: 40rpx;
		border-radius: 16rpx;
	}
}
</style>